<template>
	<view class="account-add-main">
		<mx-datepicker
			v-model="isDatePickerShow"
			:init="initDateTime"
			type="datetime"
			@selected="onSelected"
		/>
		<view class="my-uni-segmented-control">
			<uni-segmented-control
				:current="type"
				:values="items"
				v-on:clickItem="onClickItem"
				styleType="text"
				activeColor="#007aff"
			></uni-segmented-control>
		</view>
		<view class="content" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
			<view v-show="type === 0">
				<view class="in-main">
					<view class="title-box" @tap="openModel()">
						<view
							class="icon content-center"
							:class="{ active: titleActive }"
							:style="{ background: inObj.color }"
						>
							<faicon type="star" color="#fff" size="24"></faicon>
						</view>
						<view class="label">{{ inObj.title }}</view>
						<view class="my-flex"></view>
						<view class="label">
							<view :class="{ two: numberList.length > 0 }">{{ sumNumber }}</view>
							<view
								:class="{ two: numberList.length > 0 }"
								v-show="numberList.length > 0"
							>
								{{ otherNumber }}
							</view>
						</view>
					</view>
					<scroll-view scroll-y class="tag-main">
						<view
							class="item content-center"
							v-for="(item, index) in inList"
							@tap="inTap(item)"
							:key="index"
						>
							<view>
								<view
									class="icon content-center"
									:style="{ background: item.color }"
								>
									<faicon type="star" color="#fff" size="24"></faicon>
								</view>
								<view class="label">{{ item.title }}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view v-show="type === 1">
				<view class="out-main">
					<view class="title-box" @tap="openModel()">
						<view
							class="icon content-center"
							:style="{ background: outObj.color }"
							:class="{ active: titleActive }"
						>
							<faicon type="star" color="#fff" size="24"></faicon>
						</view>
						<view class="label">{{ outObj.title }}</view>
						<view class="my-flex"></view>
						<view class="label">
							<view :class="{ two: numberList.length > 0 }">{{ sumNumber }}</view>
							<view
								:class="{ two: numberList.length > 0 }"
								v-show="numberList.length > 0"
							>
								{{ otherNumber }}
							</view>
						</view>
					</view>
					<scroll-view scroll-y class="tag-main">
						<view
							class="item content-center"
							v-for="(item, index) in outList"
							@tap="outTap(item)"
							:key="index"
						>
							<view>
								<view
									class="icon content-center"
									:style="{ background: item.color }"
								>
									<faicon type="star" color="#fff" size="24"></faicon>
								</view>
								<view class="label">{{ item.title }}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<view class="account-model" :class="{ hidden: isModelHidden }">
			<view class="model-top ui-flex">
				<view class="label" @tap="open()">{{ initDateTime }}</view>
				<view class="label">现金</view>
				<view class="my-flex"></view>
				<view
					v-show="remark != ''"
					@click="setRemark({ isHidden: false })"
					class="label text-remark"
				>
					{{ remark }}
				</view>
				<view v-show="remark == ''" @click="setRemark({ isHidden: false })">
					<faicon type="pencil" color="#666" size="20"></faicon>
				</view>
			</view>
			<view class="model-main">
				<view class="item ui-flex">
					<a
						action="7"
						class="my-flex content-center"
						@click="itemClick({ action: '7' })"
					>
						7
					</a>
					<a
						action="8"
						class="my-flex content-center"
						@click="itemClick({ action: '8' })"
					>
						8
					</a>
					<a
						action="9"
						class="my-flex content-center"
						@click="itemClick({ action: '9' })"
					>
						9
					</a>
					<a
						action="b"
						class="my-flex icon-box content-center"
						@click="itemClick({ action: 'b' })"
					>
						<faicon type="arrow-left" color="#666" size="20"></faicon>
					</a>
				</view>
				<view class="item ui-flex ">
					<a
						action="4"
						class="my-flex content-center"
						@click="itemClick({ action: '4' })"
					>
						4
					</a>
					<a
						action="5"
						class="my-flex content-center"
						@click="itemClick({ action: '5' })"
					>
						5
					</a>
					<a
						action="6"
						class="my-flex content-center"
						@click="itemClick({ action: '6' })"
					>
						6
					</a>
					<a
						action="+"
						class="my-flex content-center"
						@click="itemClick({ action: '+' })"
					>
						+
					</a>
				</view>
				<view class="item ui-flex">
					<a
						action="1"
						class="my-flex content-center"
						@click="itemClick({ action: '1' })"
					>
						1
					</a>
					<a
						action="2"
						class="my-flex content-center"
						@click="itemClick({ action: '2' })"
					>
						2
					</a>
					<a
						action="3"
						class="my-flex content-center"
						@click="itemClick({ action: '3' })"
					>
						3
					</a>
					<a
						action="-"
						class="my-flex content-center"
						@click="itemClick({ action: '-' })"
					>
						-
					</a>
				</view>
				<view class="item ui-flex">
					<a
						action="c"
						class="my-flex content-center"
						@click="itemClick({ action: 'c' })"
					>
						C
					</a>
					<a
						action="0"
						class="my-flex content-center"
						@click="itemClick({ action: '0' })"
					>
						0
					</a>
					<a
						action="."
						class="my-flex content-center"
						@click="itemClick({ action: '.' })"
					>
						.
					</a>
					<a
						action="ok"
						class="my-flex content-center"
						@click="itemClick({ action: 'ok' })"
					>
						确定
					</a>
				</view>
			</view>
		</view>

		<view
			:class="{ hidden: isRemarkHidden }"
			style="transition: All 0.3s ease-out;-webkit-transition: All 0.3s ease-in-out;-moz-transition: All 0.3s ease-in-out;-o-transition: All 0.3s ease-in-out;position:fixed; bottom:0; left:0; width: 100%; height: 248px;z-index: 1000;background: #FFF;border:none;"
		>
			<view style="padding: 15px;background-color: #FFF; height: 173px;">
				<p style="color: #636163;margin: 0px 0px 6px 0px;">备注</p>
				<textarea
					v-model="remark"
					style="border: 1px solid;color: #636163;line-height: 1.3;font-size: 15px;margin-top: 5px;width: 100%;height: 135px; max-height: 135px; border-color: #F7CF84;resize:none;"
				></textarea>
			</view>
			<view
				style="background-color: #FFF;height: 45px;display: flex;border-top: 1px solid #E1E1E1;top: -1px;position: relative;"
			>
				<view style="flex: 3;"></view>
				<view
					@click="setRemark({ isHidden: true })"
					style="flex: 1;background: #5279EF;color: #FFF;line-height: 45px;text-align: center;font-size: 16px;"
				>
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniSegmentedControl from '@/components/uni-segmented-control.vue';
import mxDatepicker from '@/components/mx-datepicker.vue';
import { mapActions, mapGetters } from 'vuex';
import '@/utils/dateFormat';
import { addParams, editParams } from '@/utils/sql.js';
export default {
	components: {
		uniSegmentedControl,
		mxDatepicker
	},
	data() {
		return {
			id: null,
			type: 0,
			items: ['收入', '支出'],
			inList: [],
			outList: [],
			inObj: { color: '', icon: '', title: '' },
			outObj: { color: '', icon: '', title: '' },
			titleActive: false,
			remark: '',
			dateTime: null,
			initDateTime: '',
			nowNumber: 0.0,
			nowNumberLength: 0,
			nowFloatLength: 0,
			nowNumberList: [],
			numberList: [],
			touchStartY: 0,
			disY: 0,
			isRemarkHidden: true,
			isModelHidden: true,
			isDatePickerShow: false
		};
	},
	async onLoad(option) {
		this.showLoading('加载中..', true);
		this.id = option.id;
		this.dateTime = !!option.date ? new Date(option.date) : new Date();
		this.initDateTime = this.dateTime.Format('yyyy-MM-dd hh:mm:ss');
		this.type = option.type == 0 ? 0 : 1;
		await this.initTag();
		await this.getData();
		this.hideLoading();
	},
	methods: {
		openModel() {
			this.isModelHidden = false;
		},
		open() {
			this.isDatePickerShow = true;
		},
		onClickItem(index) {
			if (this.type !== index) {
				this.type = index;
			}
		},
		show() {
			this.titleActive = true;
			setTimeout(() => {
				this.titleActive = false;
			}, 300);
		},
		onSelected(e) {
			this.dateTime = new Date(e.value);
			this.initDateTime = this.dateTime.Format('yyyy-MM-dd HH:mm:ss');
		},
		outTap(obj) {
			this.outObj = obj;
			this.show();
			this.openModel();
		},
		inTap(obj) {
			this.inObj = obj;
			this.show();
			this.openModel();
		},
		submit() {
			let item = {};
			if (this.sumNumber == 0) {
				this.msg('请输入正确金额');
				return;
			}
			switch (this.type) {
				case 0:
					item.icon = this.inObj.icon;
					item.color = this.inObj.color;
					item.title = this.inObj.title;
					item.type = 0;
					break;
				case 1:
					item.icon = this.outObj.icon;
					item.color = this.outObj.color;
					item.title = this.outObj.title;
					item.type = 1;
					break;
			}
			item.money = this.sumNumber;
			let dateTime = this.dateTime.Format('yyyy-MM-dd hh:mm:ss');
			item.date_time = dateTime;
			item.remark = this.saveEmoji(this.remark);
			item.year = dateTime.substr(0, 4);
			item.month = dateTime.substr(5, 2);
			item.day = dateTime.substr(8, 2);
			// 先写死 9 方便删除垃圾数据
			item.user = this.userInfo.user_id;
			item.data_num = this.dateTime.Format('yyyyMMddhhmmss');
			if (!!this.id) {
				// 修改
				this.editItem(item, this.id);
			} else {
				// 新增
				this.addItem(item);
			}
		},
		addItem(item) {
			this.showLoading('保存中..');
			this.$api['data/add'](addParams('item', item)).then(({ data, code, msg }) => {
				this.hideLoading();
				if (code == 0 && data > 0) {
					this.success('保存成功');
					setTimeout(() => {
						uni.navigateBack();
					}, 800);
				} else {
					this.msg(msg);
				}
			});
		},
		editItem(item, id) {
			this.showLoading('保存中..');
			this.$api['data/edit'](editParams('item', item, id)).then(({ data, code, msg }) => {
				this.hideLoading();
				if (code == 0 && data > 0) {
					this.success('保存成功');
					setTimeout(() => {
						uni.navigateBack();
					}, 800);
				} else {
					this.msg(msg);
				}
			});
		},
		setRemark(obj) {
			this.isRemarkHidden = obj.isHidden;
		},
		touchstart(e) {
			//#ifdef MP-WEIXIN
			this.touchStartY = e.clientY;
			//#endif
			//#ifndef MP-WEIXIN
			this.touchStartY = e.touches[0].clientY;
			//#endif
		},
		touchmove(e) {
			//#ifdef MP-WEIXIN
			this.disY = e.clientY - this.touchStartY;
			//#endif
			//#ifndef MP-WEIXIN
			this.disY = e.touches[0].clientY - this.touchStartY;
			//#endif
		},
		touchend(e) {
			if (this.disY > 5) {
				// 向下
				this.isModelHidden = false;
			}

			if (this.disY < -5) {
				//  向上
				if (this.isRemarkHidden) this.isModelHidden = true;
			}
		},
		itemClick(obj) {
			const action = obj.action;
			if (this.isRealNum(action) || action == '.') {
				// 数字和点
				this.nowNumberPut(action);
			}
			if (action == 'c') {
				// 清除
				this.nowNumberInit();
				this.numberList = [];
			}
			if (action == 'b') {
				// 回退
				this.nowNumberBack();
			}
			if (action == '+' || action == '-') {
				// 运算符
				if (this.nowNumber == 0) {
					return;
				}
				this.numberList.push(this.nowNumber);
				this.numberList.push(action);
				this.nowNumberInit();
			}

			if (action == 'ok') {
				// 提交
				this.submit();
			}
		},
		nowNumberInit() {
			this.isNowFloat = false;
			this.nowNumberLength = 0;
			this.nowFloatLength = 0;
			this.nowNumberList = [];
			this.nowNumber = 0.0;
		},
		nowNumberPut(val) {
			if (this.isRealNum(val)) {
				if (!this.isNowFloat) {
					//整数
					if (this.nowNumberLength < 7) {
						if (this.nowNumberList.length == 0 && val == '0') {
							return;
						}
						this.nowNumberLength++;
						this.nowNumberList.push(val);
					}
				} else {
					//小数
					if (this.nowFloatLength < 2) {
						this.nowFloatLength++;
						this.nowNumberList.push(val);
					}
				}
			} else {
				if (val == '.' && !this.isNowFloat) {
					this.isNowFloat = true;
					this.nowNumberList.push('.');
				}
			}
		},
		nowNumberBack() {
			if (!this.isNowFloat) {
				// 整数
				this.nowNumberList.splice(this.nowNumberList.length - 1, 1);
				this.nowNumberLength--;
				if (this.nowNumberLength < 0) this.nowNumberLength = 0;
			} else {
				// 小数
				switch (this.nowFloatLength) {
					case 0:
						this.isNowFloat = false;
						// 一口气删除2个
						this.nowNumberList.splice(this.nowNumberList.length - 2, 2);
						this.nowNumberLength--;
						this.nowFloatLength--;
						if (this.nowFloatLength < 0) this.nowFloatLength = 0;
						break;
					case 1:
					case 2:
						this.nowNumberList.splice(this.nowNumberList.length - 1, 1);
						this.nowFloatLength--;
						break;
				}
			}
		},
		isRealNum(val) {
			if (val == '' || val == null) {
				return false;
			}
			if (!isNaN(val)) {
				return true;
			} else {
				return false;
			}
		},
		initTag() {
			return new Promise((resolve, reject) => {
				this.$api['fun/tagList']().then(({ data, code, msg }) => {
					if (code == 0) {
						data.forEach(element => {
							if (element.type == 0) {
								if (this.inObj.title == '') {
									this.inObj = element;
								}
								this.inList.push(element);
							} else {
								if (this.outObj.title == '') {
									this.outObj = element;
								}
								this.outList.push(element);
							}
						});
					} else {
						uni.showToast({
							title: '获取数据出错',
							icon: 'none'
						});
					}
					resolve();
				});
			});
		},
		getData() {
			return new Promise((resolve, reject) => {
				if (!this.id) {
					resolve();
					return;
				}
				this.$api['fun/itemOne']({
					id: this.id
				}).then(({ data, code, msg }) => {
					if (code == 0) {
						const item = data[0];
						if (!!item) {
							if (item.type == 0) {
								this.inObj = item;
							} else {
								this.outObj = item;
							}
							this.type = item.type;
							this.remark = this.showEmoji(item.remark);
							this.dateTime = new Date(item.date_time.replace(/\-/g, '/'));
							this.nowNumber = item.money;
						}
					} else {
						this.msg('获取数据出错');
					}
					resolve();
				});
			});
		}
	},
	computed: {
		...mapGetters(['wxInfo', 'userInfo']),
		otherNumber() {
			let result = '';
			this.numberList.forEach(element => {
				if (element != '+' && element != '-') {
					result += element.toFixed(2);
				} else {
					result += element;
				}
			});
			result += this.nowNumber.toFixed(2);
			return result;
		},
		sumNumber() {
			let num = 0.0;
			if (this.numberList.length != 0) {
				for (let i = 0; i < this.numberList.length; i++) {
					const element = this.numberList[i];
					if (element != '+' && element != '-') {
						if (i == 0) {
							num = element;
						} else {
							if (this.numberList[i - 1] == '+') {
								num += element;
							}
							if (this.numberList[i - 1] == '-') {
								num -= element;
							}
						}
					}
				}
				if (this.numberList[this.numberList.length - 1] == '+') {
					num += this.nowNumber;
				}
				if (this.numberList[this.numberList.length - 1] == '-') {
					num -= this.nowNumber;
				}
				if (num > 9999999.99) {
					num = 9999999.99;
				}
				if (num < 0.0) {
					num = 0.0;
				}
				return num.toFixed(2);
			} else {
				return this.nowNumber.toFixed(2);
			}
		}
	},
	watch: {
		nowNumberList(newList, oldList) {
			let num = '';
			const length = newList.length;
			if (length == 0) {
				this.nowNumber = 0.0;
			} else {
				for (let i = 0; i < length; i++) {
					if (i == 0 && newList[i] == '.') {
						num += '0';
					}
					num += newList[i];
				}
				this.nowNumber = Number(num);
			}
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.account-add-main {
	height: 100%;
	position: relative;
	.my-uni-segmented-control {
		height: 32px;
		line-height: 32px;
	}
	.content {
		position: absolute;
		left: 0;
		right: 0;
		top: 32px;
		bottom: 0;
		background: #f8f8f8;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		.out-main {
			position: absolute;
			left: 0px;
			right: 0px;
			bottom: 0px;
			top: 1px;
		}
		.in-main {
			position: absolute;
			left: 0px;
			right: 0px;
			bottom: 0px;
			top: 1px;
		}
		.title-box {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			display: flex;
			height: 46px;
			padding: 2px 15px;
			line-height: 45px;
			background: #fff;
			.icon {
				border-radius: 50%;
				width: 36px;
				height: 36px;
				margin: 5px;
				font-size: 12px;
				text-align: center;
				line-height: 31px;
				background-color: #f66;
				color: #fff;
				transition: All 0.2s ease-out;
				-webkit-transition: All 0.2s ease-in-out;
				-moz-transition: All 0.2s ease-in-out;
				-o-transition: All 0.2s ease-in-out;
				&.active {
					transform: scale(1.2);
					-webkit-transform: scale(1.2);
					-moz-transform: scale(1.2);
					-o-transform: scale(1.2);
					-ms-transform: scale(1.2);
				}
			}
			.label {
				margin-left: 5px;
				font-size: 19px;
				color: #636163;
				.two {
					line-height: 20px;
					font-size: 14px;
					text-align: right;
					text-overflow: ellipsis;
					overflow: hidden;
					text-align: right;
					white-space: nowrap;
					width: 150px;
					&:first-child {
						line-height: 25px;
						font-size: 17px;
					}
				}
			}
		}
		.tag-main {
			position: absolute;
			left: 0;
			right: 0;
			top: 52px;
			bottom: 0;
			.item {
				position: relative;
				width: 20%;
				height: 80px;
				float: left;
				margin-bottom: 5px;
				.icon {
					border-radius: 50%;
					width: 36px;
					height: 36px;
					margin: 5px auto;
					font-size: 12px;
					text-align: center;
					line-height: 31px;
					background-color: #f66;
					color: #fff;
				}
				.label {
					font-size: 15px;
					color: #636163;
				}
			}
		}
	}
	.account-model {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 999;
		height: 248px;
		transition: All 0.3s ease-out;
		-webkit-transition: All 0.3s ease-in-out;
		-moz-transition: All 0.3s ease-in-out;
		-o-transition: All 0.3s ease-in-out;

		.model-top {
			border-top: 1px solid #efefef;
			width: 100%;
			height: 40px;
			line-height: 40px;
			padding: 0 10px;
			box-sizing: border-box;
			border-bottom: 1px solid #efefef;
			font-size: 14px;
			color: #5a79e7;
			background: rgba(255, 255, 255, 0.8);
			.label {
				&:active {
					background: #efefef;
				}
				border: 1px solid #efefef;
				border-radius: 12px;
				margin: 7px 3px;
				height: 20px;
				line-height: 18px;
				padding: 1px 14px;
				max-width: 80px;
				overflow: hidden;
			}
		}
		.model-main {
			width: 100%;
			height: 208px;
			text-align: center;
			font-size: 22px;
			.item {
				width: 100%;
				height: 52px;
				line-height: 52px;
				box-sizing: border-box;
				border-bottom: 1px solid #efefef;
				background-color: #f7f7f7;
				a {
					box-sizing: border-box;
					color: #8c8e8c;
					border-right: 1px solid #efefef;
					position: relative;
					&:first-child {
						border-left: 1px solid #efefef;
					}
					&:active {
						background: #efefef;
					}
				}
			}
		}
	}
	.hidden {
		transform: translate3d(0px, 250px, 0px);
		-webkit-transform: translate3d(0px, 250px, 0px);
		-moz-transform: translate3d(0px, 250px, 0px);
		-o-transform: translate3d(0px, 250px, 0px);
		-ms-transform: translate3d(0px, 250px, 0px);
	}
}
</style>
